<nz-drawer
  nzClosable="false"
  [nzExtra]="extra"
  [nzVisible]="visible"
  nzPlacement="right"
  [nzWidth]="700"
  nzTitle="Metric"
  (nzOnClose)="onClose()">
  <ng-container *nzDrawerContent>
    <form nz-form [formGroup]="metricForm" (ngSubmit)="doSubmit()" nzLayout="vertical">
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@common.name">Name</nz-form-label>
        <nz-form-control nzErrorTip="Metric name cannot be empty" i18n-nzErrorTip="@@expt.metric.name-cannot-be-empty">
          <input type="text" nz-input formControlName="name" i18n-placeholder="@@common.name" placeholder="Name"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label i18n="@@common.description">Description</nz-form-label>
        <nz-form-control>
          <input type="text" nz-input formControlName="description" i18n-placeholder="@@common.description" placeholder="Description"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label nzRequired i18n="@@expt.metric.maintainer">Maintainer</nz-form-label>
        <nz-form-control i18n-nzErrorTip="@@expt.metric.maintainer-cannot-be-empty" nzErrorTip="Maintainer cannot be empty">
          <nz-select
            class="nz-select-40"
            i18n-nzPlaceHolder="@@expt.metric.select-maintainer"
            nzPlaceHolder="Select maintainer"
            nzAllowClear
            nzShowSearch
            nzServerSearch
            formControlName="maintainerUserId"
            (nzOnSearch)="onSearchMaintainer($event)">
            <ng-container *ngFor="let o of maintainerList">
              <nz-option
                *ngIf="!isMaintainersLoading"
                [nzValue]="o.id"
                [nzLabel]="o.name || o.email">
              </nz-option>
            </ng-container>
            <nz-option *ngIf="isMaintainersLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i>
              <ng-container i18n="@@common.loading">Loading...</ng-container>
            </nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <h3 i18n="@@expt.metric.event-info">Event information</h3>
      <nz-form-item [ngStyle]="metricForm.value.eventType === customEventType ? { 'margin-bottom': '8px' } : {}">
        <nz-form-label nzRequired i18n="@@expt.overview.event-type">Event type</nz-form-label>
        <nz-form-control i18n-nzErrorTip="@@expt.overview.event-type-cannot-be-empty" nzErrorTip="Event type cannot be empty">
          <nz-select class="nz-select-40" formControlName="eventType">
            <nz-option [nzValue]="customEventType"  nzLabel="Custom"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <ng-container
        *ngIf="metricForm.value.eventType === pageViewEventType || metricForm.value.eventType === clickEventType">
        <nz-form-item *ngIf="metricForm.value.eventType === clickEventType">
          <nz-form-label>Targets</nz-form-label>
          <nz-form-control nzErrorTip="Targets">
            <input type="text" nz-input formControlName="elementTargets" i18n-placeholder="@@expt.metric.target-selector" placeholder="One or more CSS selector, seperated by (,)"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item formArrayName="targetUrls">
          <nz-form-label>
            <span i18n="@@expt.metric.targeting-page-url">Targeting page URL</span>
            <i class="add-target-url-icon" (click)="addTargetUrl()" nz-icon nzType="icons:icon-add-outline"></i>
          </nz-form-label>
          <nz-form-control
            class="target-url-form-control"
            *ngFor="let n of metricForm.controls.targetUrls.controls; let idx = index;"
            nzErrorTip="URL！" formGroupName="{{idx}}">
            <div class="target-url-row">
              <nz-select class="nz-select-40" formControlName="matchType">
                <nz-option i18n-nzLabel="@@expt.metric.string-including" nzLabel="String including" [nzValue]="substringUrlMatchType"></nz-option>
              </nz-select>
              <input type="text" nz-input formControlName="url" i18n-placeholder="@@expt.metric.targeting-page-url" placeholder="Targeting page URL"/>
              <i (click)="removeTargetUrl(idx)" nz-icon nzType="icons:icon-delete"></i>
            </div>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
      <ng-container *ngIf="metricForm.value.eventType === customEventType">
        <nz-form-item>
          <nz-form-control>
            <nz-radio-group formControlName="customEventTrackOption" class="custom-event-option">
              <label nz-radio [nzValue]="customEventTrackConversion" i18n="@@common.conversion-rate">Conversion rate</label>
              <label nz-radio [nzValue]="customEventTrackNumeric" i18n="@@common.numeric">Numeric</label>
            </nz-radio-group>
          </nz-form-control>
          <span class="radio-group-tip" *ngIf="metricForm.value.customEventTrackOption === customEventTrackNumeric">
            <i nz-icon nzType="info-circle"></i>
            <ng-container i18n="@@expt.metric.to-get-accurate-result-send-value-for-numeric">To obtain a accurate result, a numeraic value must be sent for numeric experiment</ng-container>
          </span>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzRequired i18n="@@expt.metric.event-name">Event name</nz-form-label>
          <nz-form-control i18n-nzErrorTip="@@expt.metric.event-name-cannot-be-empty" nzErrorTip="Event name cannot be empty">
            <input type="text" nz-input formControlName="eventName" i18n-placeholder="@@expt.metric.event-name" placeholder="Event name"/>
          </nz-form-control>
          <span class="input-tip" i18n="@@expt.metric.used-by-code">Used by code</span>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label i18n="@@expt.metric.unit">Unit</nz-form-label>
          <nz-form-control>
            <input type="text" nz-input formControlName="customEventUnit" i18n-placeholder="@@expt.metric.unit-exemple" placeholder="ms, $, kg etc."/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label i18n="@@expt.metric.winning-criteria">Winning criteria</nz-form-label>
          <nz-form-control>
            <nz-select class="nz-select-40" formControlName="customEventSuccessCriteria">
              <nz-option [nzValue]="customEventSuccessCriteriaHigher" i18n-nzLabel="@@expt.metric.higher-than-baseline" nzLabel="Higher than baseline"></nz-option>
              <nz-option [nzValue]="customEventSuccessCriteriaLower" i18n-nzLabel="@@expt.metric.lower-than-baseline" nzLabel="Lower than baseline"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
      <button nz-button class="submit-btn" [nzType]="'primary'" [nzLoading]="isLoading" i18n="@@common.save">Save</button>
    </form>
  </ng-container>
  <ng-template #extra>
    <i (click)="onClose()" nz-icon nzType="icons:icon-close"></i>
  </ng-template>
</nz-drawer>

